目前的專案架構長這樣：

AI_Nutri_Project/
├── main.py              # Flask 應用程式主程式
└── credentials.json     # Google OAuth 憑證

今天要來幫 UI 穿一件衣服（加入 index.html）

AI_Nutri_Project/  
├── main.py    
├── credentials.json  
└── index.html   

實作一個 AI 營養顧問 UI 介面

介面規劃：

模擬一位親切、專業的營養顧問（不讓使用者填寫一大堆表單，而是用 「問答」 或 「步驟引導」 的方式收集資訊）：
    * 使用 Bootstrap-like 結構來實現。
    * 將所有輸入集中在一個引導式頁面。

介面功能：

    * 連接並獲取 Google Fit 資料。（已完成）
    * 首頁/輸入頁 (Index)：文字輸入欄位和圖片上傳。（未完成）
    * 串接 AI API： 綜合分析使用者提供的資訊。（未完成）

編輯 index.html

* 美化 Google Fit 驗證連結：

增加文字輸入欄位和圖片上傳

在表單(form) 內增加兩個 div 區塊

        <div class="card-input">
          <h2>1. 您的目標或疑問？</h2>
          <div class="input-group">
            <label for="user_goal"
              >請告訴我 (例如：我想知道這餐熱量/我想在三個月內減重 5
              公斤)</label
            >
            <textarea
              id="user_goal"
              name="user_goal"
              rows="3"
              required
            ></textarea>
          </div>
        </div>

        <div class="card-input">
          <h2>2. 上傳食物圖片</h2>
          <div class="upload-area">
            <input
              type="file"
              id="food_image"
              name="food_image"
              accept="image/*"
              style="display: none"
              required
            />
            <label for="food_image" style="cursor: pointer">
              📸 上傳圖片 (午餐/晚餐等)
            </label>
          </div>
        </div>

示意圖

可依照自己的需求，繼續加入div